<template>
  <div class="main">
    <div v-if="dataList.length <= 0">
      <el-empty description="空空如也"></el-empty>
    </div>
    <div class="main_box" v-else>
      <div class="main_row swiper" id="banner3">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in dataList" :key="index">
            <div class="item" v-for="(it, i) in item" :key="i" @click="linkTo('company', it.id)">
              <div class="bg"></div>
              <img :src="it.companyLogo" class="logo" />
              <div class="name">{{ it.companyName }}</div>
              <div class="industry">{{ it.industry }}</div>
              <div class="item_bot">
                <div class="nodata" v-if="it.companyJobDOList.length <= 0">
                  --暂无更多职位--
                </div>
                <div class="rows" v-for="(t, j) in it.companyJobDOList" :key="j">
                  <span class="jobName">{{ t.jobName }}</span>
                  <span class="city">{{ t.city }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="job_main_row">
        <div class="job-swiper-wrapper">
          <div class="job-swiper-slide" v-for="(item, index) in dataList" :key="index">
            <div class="item" v-for="(it, i) in item" :key="i" @click="linkTo('company', it.id)">
              <div class="bg"></div>
              <img :src="it.companyLogo" class="logo" />
              <div class="name">{{ it.companyName }}</div>
              <div class="industry">{{ it.industry }}</div>
              <div class="item_bot">
                <div class="nodata" v-if="it.companyJobDOList.length <= 0">
                  --暂无更多职位--
                </div>
                <div class="rows" v-for="(t, j) in it.companyJobDOList" :key="j">
                  <span class="jobName">{{ t.jobName }}</span>
                  <span class="city">{{ t.city }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
  name: "item1",
  props: {
    dataList: Array,
  },
  components: {},
  data() {
    return {
      swiper: null,
    };
  },
  watch: {},
  methods: {
    linkTo(routeName, id) {
      this.$router.push({ name: routeName, query: { id: id } });
    },
    slidePrev() {
      this.swiper.slidePrev();
    },
    slideNext() {
      this.swiper.slideNext();
    },
    initSwiper() {
      if (this.swiper === null) {
        this.swiper = new Swiper("#banner3", {
          observer: true,
          observeParents: true,
        });
      }
    },
  },
  created() {
    console.log(this.dataList)
  },
  mounted() { },
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  overflow: hidden;
}

.main_box {
  width: 100%;
  position: relative;
  height: 380px;
  overflow-x: hidden;

  .job_main_row {
    display: none;
  }

  .main_row {
    width: 100%;
    padding: 20px 0;
    height: 380px;
    overflow: hidden;

    .swiper-slide {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 30px;
      height: 340px;
    }

    .item {
      width: calc((100% - 90px) / 4);
      height: 340px;
      border: 1px solid #ebebeb;
      // background: linear-gradient(148deg, #D2E4F9 0%, #FAFBFB 64%);
      background: #fff;
      box-shadow: 0px 0px 20px 1px rgba(124, 124, 124, 0.14);
      border-radius: 10px;
      margin-right: 30px;
      transition-duration: 0.3s;
      padding: 147px 0 120px;
      position: relative;
      font-family: MicrosoftYaHei;
      overflow: hidden;
      cursor: pointer;

      .bg {
        width: 100%;
        height: 82px;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient(90deg, #d2e4f9 0%, #fafbfb 100%);
      }

      .logo {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 10px;
        left: 50%;
        transform: translateX(-50%);
        top: 45px;
        z-index: 1;
      }

      .name {
        width: 100%;
        padding: 0 10px;
        font-size: 20px;
        font-weight: bold;
        color: #000;
        line-height: 21px;
        margin-bottom: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        transition-duration: 0.3s;
      }

      &:hover .name {
        color: #15389a;
      }

      .industry {
        font-size: 15px;
        line-height: 16px;
        font-weight: 400;
        color: #999999;
        text-align: center;
      }

      .item_bot {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 120px;
        background: #fff;
        padding: 34px 20px 38px;
        font-family: MicrosoftYaHeiLight;
        font-weight: 400;
        font-size: 13px;
        line-height: 14px;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          width: calc(100% - 40px);
          left: 20px;
          height: 1px;
          background: #ebebeb;
        }

        .nodata {
          position: absolute;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          color: #9597a0;
        }

        .rows {
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;

          .jobName {
            color: #000000;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 185px;
          }

          .city {
            color: #999999;
          }
        }
      }

      &:nth-child(4) {
        margin-right: 0;
      }

      &:hover {
        box-shadow: 0px 0px 20px 1px rgba(124, 124, 124, 0.2);
        transform: scale(1.02);
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .main_box {
    width: 100%;
    // position: relative;
    height: auto;
    overflow-x: hidden;

    .main_row {
      display: none;
    }

    .job_main_row {
      display: block;
      width: 100%;
      padding: 20px 0;
      height: auto;
      overflow: hidden;

      .job-swiper-slide {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 10px;
        height: auto;
      }

      .item {
        width: 48%;
        // height: 211px;
        border: 1px solid #ebebeb;
        // background: linear-gradient(148deg, #D2E4F9 0%, #FAFBFB 64%);
        background: #fff;
        // box-shadow: 0px 0px 20px 1px rgba(124, 124, 124, 0.14);
        box-shadow: none;
        border-radius: 10px;
        margin-bottom: 10px;
        // margin-right: 11px;
        transition-duration: 0.3s;
        // padding: 147px 0 120px;
        position: relative;
        font-family: MicrosoftYaHei;
        overflow: hidden;
        cursor: pointer;

        &.item:nth-child(2n) {
          margin-right: 0;
        }

        .bg {
          width: 100%;
          height: 49px;
          position: absolute;
          left: 0;
          top: 0;
          background: linear-gradient(90deg, #d2e4f9 0%, #fafbfb 100%);
        }

        .logo {
          position: absolute;
          width: 58px;
          height: 58px;
          border-radius: 6px;
          border: 1px solid #D4D6DA;
          left: 50%;
          transform: translateX(-50%);
          top: 19px;
          z-index: 1;
        }

        .name {
          width: 100%;
          padding: 0 10px;
          font-size: 14px;
          font-weight: bold;
          color: #000;
          line-height: 21px;
          margin-top: 88px;
          margin-bottom: 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;
          transition-duration: 0.3s;
        }

        &:hover .name {
          color: #15389a;
        }

        .industry {
          position: relative;
          font-size: 15px;
          padding-bottom: 10px;
          line-height: 16px;
          font-weight: 400;
          color: #999999;
          text-align: center;

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            width: calc(100% - 18px);
            left: 9px;
            height: 1px;
            background: #ebebeb;
          }
        }

        .item_bot {
          width: 100%;
          // position: absolute;
          // left: 0;
          // bottom: 0;
          // height: 120px;
          background: #fff;
          padding: 14px 10px 0;
          // padding: 34px 20px 38px;
          font-family: MicrosoftYaHeiLight;
          font-weight: 400;
          font-size: 13px;
          line-height: 14px;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between;

          .nodata {
            // position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            // left: 0;
            // top: 50%;
            transform: none;
            font-size: 12px;
            margin-bottom: 15px;
            color: #9597a0;
          }

          .rows {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;

            .jobName {
              color: #000000;
              margin-bottom: 15px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              max-width: 185px;
            }

            .city {
              color: #999999;
            }
          }
        }

        &:nth-child(4) {
          margin-right: 0;
        }

        &:hover {
          // box-shadow: 0px 0px 20px 1px rgba(124, 124, 124, 0.2);
          box-shadow: none;
          transform: none;
          // transform: scale(1.02);
        }
      }
    }
  }
}</style>
